import React from 'react'
import { connect } from 'dva'
import { isEmpty, cloneDeep, find, sortBy, pick } from 'lodash'
import { Form, Modal, Row, Spin, Col, Input, Select, Tabs, Table, Tooltip, Button, Icon, Popconfirm, Radio, Tag, DatePicker } from 'antd'
import { listConfig } from 'config/config'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index.jsx'
import { mapStateToProps } from 'utils/view_utils'
import styles from './activityDetailStyle.less'
import cx from 'classnames'
import moment from 'moment';

//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'

const Option = Select.Optioncomponents
const RadioGroup = Radio.Group
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { MonthPicker, RangePicker } = DatePicker;
const routeView = function ({ dispatch, model, form }) {
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
    const { modelObj, namespace } = model
    const { detailData, activeKey, tableData, queryCondition, listData, activityId } = modelObj
    console.log('modelObj', modelObj)

    const formItemLayout = {
        labelCol: { span: 9 }, wrapperCol: { span: 15 }
    };

    const columns = [
        { title: '客户姓名', dataIndex: 'name', key: 'name' },
        { title: '手机号码', dataIndex: 'mobile', key: 'mobile',width:130 },
        { title: '参与人数', dataIndex: 'applyCnt', key: 'applyCnt', },

    ];

    //model数据更新
    function inputChange(name, value) {
        dispatch({
            type: `${namespace}/updateStore`,
            payload: Object.assign(queryCondition, { [name]: value })
        });
    }

    // 分页
    const pagination = {
        current: Number(detailData.pageNo || 1),
        pageNo: Number(detailData.pageNo || 1),
        pageSize: Number(detailData.pageSize || 10),
        total: Number(detailData.total),
        showTotal: e => '共 ' + detailData.total + ' 条',
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: changePage, //分页事件
        onShowSizeChange: changePage, //每页条数
    }

    //翻页函数
    function changePage(page, pageSize) {
        dispatch({
            type: `${namespace}/queryInfo`,
            payload: { pageNo: page, pageSize, activityId }
        });
    }

    //导出
    async function downLoad() {
        await dispatch({
            type: `${namespace}/downLoad`,
            payload: { activityId }
        });
    }

    return <div className="public_listMain">
        <div className={'customForm'}>
            <CollapsiblePanels title=''>
                <Form autoComplete="off" className="auto-wrap">
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="所属项目">
                                <div>{detailData.businessName}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="活动标题">
                                <div>{detailData.title}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="活动日期">
                                <div>{`${detailData.startTime||''}${detailData.endTime&&' ~ '}${detailData.endTime||''}`}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="报名人数">
                                <div>{detailData.applyCnt}人</div>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </CollapsiblePanels>


        </div>

        <div className="boxShadow">
            <div style={{ marginBottom: 48,position: "relative" }}>
                {
                    <FlagBtn node={<Button type="primary" loading={modelObj.exportLoading} style={{ position: "absolute", right: 0 }} onClick={() => {
                        downLoad(activityId)
                    }
                    }>导出</Button>} btnId={'140102'}> </FlagBtn>
                    // <Button type="primary" loading={modelObj.exportLoading} style={{ position: "absolute", right: 0 }} onClick={() => {
                    //     downLoad(activityId)
                    // }
                    // }>导出</Button>
                }
            </div>

            <Table
                columns={columns}
                dataSource={listData}
                pagination={pagination}
            />
        </div>


    </div>
}

export default connect(mapStateToProps)(Form.create()(routeView))
